<template>
	<view class="container index-container">
		<view class="index-top">
			<view class="index-search" @click="jump('/pages/index/search')">
				<searchVue :disabled="true" :placeholder="'请输入商品或商家名称'" />
			</view>
			<view class="index-msg" @click="jump('/pages/user/msg')">
				<text class="iconfont">&#xe619;</text>
				<text class="msg-type"></text>
			</view>
		</view>
		<view class="swiper-parent">
			<swiper class="swiper" circular :autoplay="true" :interval="5000" :duration="500">
				<swiper-item v-for="(item,idx) in bannerList" :key="'banner_'+idx" @click="jump(item.content)">
					<view class="swiper-item">
						<image class="banner-img" :src="item.url" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
		</view>
		<view class="category-parent">
			<view class="category-list" v-for="item in categoryList" :key="item.id"
				@click="jump('/pages/category/goodsList?level1='+item.id)">
				<image class="category-img" :src="item.picture" mode="aspectFill"></image>
				<view class="category-title">{{item.name}}</view>
			</view>
		</view>
		<view class="coupon-parent">
			<view class="parent-title"><text class="iconfont" style="color:#EC7440">&#xe618;</text>我的优惠券</view>
			<view class="coupon-list-box" v-if="couponList.length>0">
				<view v-for="(item,idx) in couponList" :key="'coupon_'+idx">
					<couponListVue :couponData="item" v-if="idx<3" />
				</view>

				<view class="coupon-more" @click="jump('/pages/user/myCoupon')">
					查看更多
					<text class="iconfont">&#xe775;</text>
				</view>
			</view>
			<view class="coupon-list-box" v-else>
				<view style="font-size: 24rpx;color: #999;text-align: center;" v-if="userInfo.token">暂无优惠券</view>
				<view style="font-size: 24rpx;color: #999;text-align: center;" v-else>
					<view>暂未登录</view>
					<view class="yuan-btn btn-success"
						style="height: 60rpx;width: 200rpx;margin: 0 auto;margin-top: 20rpx;"
						@click="jump('/pages/login/index')">去登录</view>
				</view>
			</view>


		</view>
		<view class="goods-parent">
			<view class="parent-title">
				<text class="iconfont" style="color:#EC5047">&#xe617;</text>
				今日上新
			</view>
			<goodsListVue :goodsList="pageList" />
		</view>
		<view class="not-more" v-if="isLoading">加载中...</view>
		<view class="null-page" v-else-if="pageList.length<=0 ">
			<text class="iconfont">&#xe642;</text>
			<view class="null-page-tips">暂无数据~</view>
		</view>
		<view class="not-more" v-else-if="notMore">没有更多了...</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, ref } from 'vue';
	import { getStorage, hideLoading, setStorage, showLoading, showToast } from '@/common/util';
	import { onShow, onLoad, onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app"
	import api from '@/common/api';
	import searchVue from '@/components/search.vue';
	import couponListVue from '@/components/couponList.vue'
	import goodsListVue from '@/components/goodsList.vue'
	import commonStore from '../../store/commonStore';
	const isLoading = ref(false)
	const pageList = ref([])
	const notMore = ref(true)
	const couponList = ref<any[]>([])

	onMounted(async () => {
		await getCouponList()
		if (pageType.value === 'goods') {
			//分享商品跳转，保存分享人Id 跳转到商品详情
			uni.navigateTo({
				url: `/pages/category/goodsDetail?id=${pageGoodsId.value}&shareUserId=${pageId.value}`
			})
			return
		}

	})
	const pageType = ref('')
	const pageId = ref('')
	const pageGoodsId = ref('')

	onLoad((options) => {
		pageType.value = options.type;
		pageId.value = options.id;
		pageGoodsId.value = options.gId;
	})
	onShow(async () => {
		console.info(commonStore.state.reload)
		if (commonStore.state.reload.indexOf('index') >= 0) {
			commonStore.commit('delReload', 'index')
			showLoading()
			Promise.all([getBanner(), getCategory(), getCouponList()]).then(() => {
				hideLoading()
				refreshList()
			})
		}
	})
	const userInfo = ref<any>({})
	const getCouponList = async () => {
		// 如果没登录 跳过
		userInfo.value = getStorage('userAuth') || {}
		if (userInfo.value.token) {

		} else {
			return
		}

		showLoading()
		isLoading.value = true
		try {
			const res = await api.findUserCouponList({
				status: 0,
				type: '商城券'
			})
			couponList.value = res.data || []
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const pageSize = 10
	let pageNum = 1
	const getPageList = async () => {
		showLoading()
		isLoading.value = true
		try {
			const res = await api.findNewestGoodsInfo({})
			if (res.data.length < pageSize) notMore.value = true
			pageList.value = pageList.value.concat(res.data)
		} finally {
			isLoading.value = false
			hideLoading()
		}
	}
	const loadMore = () => {
		if (isLoading.value) return
		if (notMore.value) return
		pageNum = pageNum + 1
		getPageList()
	}
	const refreshList = () => {
		notMore.value = false
		pageNum = 1
		pageList.value = []
		getPageList()
		getCouponList()
	}

	const search = (key : string) => {
		jump('/pages/category/goodsList?keyword=' + key)
	}

	onReachBottom(() => {
		loadMore()
	})
	onPullDownRefresh(() => {
		refreshList()
		uni.stopPullDownRefresh()
	})

	const jump = (url : string) => {
		if (!url) return
		uni.navigateTo({ url })
	}
	const bannerList = ref([])
	const getBanner = async () => {
		try {
			const res = await api.findBanner({})
			const data = res.data || {}
			const rows = data.rows || [{ picturesJSON: [] }]
			const list = rows[0].picturesJSON
			bannerList.value = list
		} finally {

		}
	}
	const categoryList = ref([])
	const getCategory = async () => {
		try {
			const res = await api.findGoodsClassify({
				level: '一级'
			})
			const data = res.data || {}
			categoryList.value = data.rows || []
		} finally {

		}
	}
</script>

<style lang="scss">
	.index-container {
		padding: 20rpx;
		background-color: #F5F6FA;

		.index-top {
			display: flex;
			align-items: center;
		}

		.parent-title {
			font-size: 34rpx;
			color: #333;
			font-weight: bold;
			display: flex;
			align-items: center;
			height: 100rpx;

			.iconfont {
				font-weight: lighter;
				font-size: 46rpx;
				margin-right: 10rpx;
			}
		}

		.index-search {
			flex-grow: 1;
		}

		.index-msg {
			position: relative;
			margin-left: 30rpx;
		}

		.index-msg .iconfont {
			font-size: 45rpx;
		}

		.msg-type {
			width: 15rpx;
			height: 15rpx;
			border-radius: 10rpx;
			position: absolute;
			top: -15rpx;
			right: -10rpx;
			background-color: red;
		}

		.swiper-parent {
			margin-top: 20rpx;
		}

		.swiper {
			height: 375rpx;
		}

		.swiper-item {
			height: 100%;
			text-align: center;
		}

		.banner-img {
			width: 100%;
			border-radius: 8rpx;
		}

		.category-parent {
			margin-top: 30rpx;
			background-color: #fff;
			padding: 30rpx 0 10rpx 0;
			border-radius: 10rpx;
		}

		.category-list {
			width: 25%;
			display: inline-block;
			overflow: hidden;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.category-img {
			width: 110rpx;
			height: 110rpx;
			border-radius: 8rpx;
		}

		.category-title {
			font-size: 28rpx;
			color: #333;
		}


		.coupon-parent {
			margin-top: 20rpx;
		}

		.coupon-list-box {
			background-color: #fff;
			padding: 20rpx;
			border-radius: 10rpx;
		}

		.coupon-more {
			color: #666;
			font-size: 26rpx;
			text-align: right;

			.iconfont {
				font-size: 28rpx;
			}
		}

		.goods-parent {
			border-radius: 10rpx;
			//padding: 0 20rpx;
			padding-bottom: 20rpx;
			margin-top: 20rpx;
		}
	}
</style>